<template>
  <div class="material-apply">
    <el-dialog
      :visible.sync="dialogVisible"
      width="700px"
      append-to-body
      :modal="true"
      @close="resetApply"
    >
      <span slot="title" class="dialog-title">物料申请</span>
      <div class="dialogBody">
        <div class="title">
          <p>
            <span>诊所名称</span>
            <el-select
              v-model="name"
              filterable
              remote
              placeholder="请输入诊所名称"
              :remote-method="remoteMethod"
              :loading="loading"
              @change="changeClinic"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.clinicName"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-button type="primary" @click="addClinic">增加</el-button>
          </p>
          <div v-if="clinicList.length">
            <h3>申请用途</h3>
            <el-input
              v-for="item of clinicList"
              v-show="activeName === item.clinicId"
              :key="item.clinicId"
              v-model="item.purpose"
              type="textarea"
              rows="6"
              placeholder="请填写申请用途"
            ></el-input>
          </div>
          <div v-else>
            <h3>申请用途</h3>
            <el-input v-model="mealForm.purpose" type="textarea" rows="6" placeholder="请填写申请用途"></el-input>
          </div>
        </div>
        <div class="clinicInfo">
          <el-tabs v-if="clinicList.length" v-model="activeName">
            <el-tab-pane v-for="item of clinicList" :key="item.clinicId" :label="item.clinicName" :name="item.clinicId">
              <todo-item :clinic-list="item"></todo-item>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="btn">
          <el-button type="primary" @click="resetApply">取消</el-button>
          <el-button type="primary" @click="submitApply">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import todoItem from '@/views/material/todoItem';
import { queryOrg } from '@/api/operPatient';
import { boomApply } from '@/api/bomApply';
export default {
  components: {
    todoItem
  },
  data() {
    return {
      dialogVisible: false,
      name: null, // 诊所名称
      options: [],
      list: [],
      loading: false,
      mealForm: {
        purpose: null, // 申请用途
        clinicId: null, // 诊所id
        clinicName: null, // 诊所名称
        itemList: [] // 申请信息
      },
      activeName: null, // 默认激活
      clinicList: [], // 新增诊所名称
      materialList: [] // 物料申请详情
    };
  },
  computed: {},
  mounted() {
    // 诊所名称
    queryOrg('clinic/configList', { clinicName: null })
      .then((res) => {
        this.list = res;
      }).catch((er) => {});
  },
  methods: {
    isShow(data) {
      data.forEach(item => {
        item.checked = false;
        item.count = 0;
      });
      this.materialList = data;
      this.dialogVisible = true;
    },
    // 远程搜索
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.clinicName.indexOf(query) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    // 诊所名称
    changeClinic(e) {
      const _clinicList = this.list.filter(item => {
        return item.id === e;
      });
      this.mealForm.clinicName = _clinicList[0].clinicName;
      this.mealForm.clinicId = _clinicList[0].id;
    },
    // 新增诊所
    addClinic() {
      const flag = this.clinicList.find(item => item.clinicId === this.name);
      if (this.name && !flag) {
        const materialList = JSON.parse(JSON.stringify(this.materialList));
        this.clinicList.push({ clinicId: this.mealForm.clinicId, clinicName: this.mealForm.clinicName, materialList, itemList: [], purpose: null });
        this.activeName = this.mealForm.clinicId;
        this.name = null;
      }
    },
    submitApply() {
      const applyList = JSON.parse(JSON.stringify(this.clinicList));
      applyList.forEach(item => {
        delete item.materialList;
      });
      boomApply({ applyList }).then(res => {
        this.$notify.success('物料申请成功');
        this.resetApply();
        this.$emit('boomApplySuccess');
      }).catch(er => {});
    },
    resetApply() {
      this.mealForm.purpose = null;
      this.clinicList = [];
      this.materialList = [];
      this.dialogVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
>>> .el-dialog{
  margin-top: 5vh !important;
}
.title{
  p{
    margin: 0;
    span{
      width: 64px;
      height: 21px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 26px;
      color: #999999;
    }
    .el-select{
      width: 400px;
      margin-left: 20px;
    }
    .el-button{
      float: right;
    }
  }
}
.clinicInfo{
  margin-top: 20px;
  >>> .el-tabs__item{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 34px;
    color: #666666;
  }
  >>> .el-tabs__item.is-active{
    font-weight: bold;
    color: #508FCC;
  }
  >>> .el-tabs__active-bar{
    background: none;
  }
  >>> .el-tabs__nav-wrap::after{
    height: 1px;
  }
}
.btn{
  margin-top: 20px;
  text-align: right;
}
</style>
